<template>
    <div>
        <ComAttribute>
            <div slot="content-nav">

            </div>
            <div slot="sub-content">
                <el-form ref="form" label-width="80px" size="small" label-position="left">
                    <attribute-item title="展示样式">
                        <el-form-item label-width="0">
                            <el-radio-group v-model="styles.nav_style">
                                <el-radio :label="1">固定显示</el-radio>
                                <el-radio :label="2">分页滑动</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="每行数量">
                            <el-select v-model="styles.nav_line_num">
                                <el-option label="2个" :value="2"></el-option>
                                <el-option label="3个" :value="3"></el-option>
                                <el-option label="4个" :value="4"></el-option>
                                <el-option label="5个" :value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="显示行数">
                            <el-select v-model="styles.nav_line">
                                <el-option label="1行" :value="1"></el-option>
                                <el-option label="2行" :value="2"></el-option>
                                <el-option label="3行" :value="3"></el-option>
                                <el-option label="4行" :value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </attribute-item>
                    <attribute-item title="导航内容">
                        <nav-list v-model="content.data" @add="addContentData" />
                    </attribute-item>
                </el-form>
                
            </div>
        </ComAttribute>
        
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import AttributeTabs from '@_c/decorate/attribute-tabs.vue'
import ColorSelect from '@_c/decorate/color-select.vue'
import StyleChose from '@_c/decorate/style-chose.vue'
import Slider from '@_c/decorate/slider.vue'
import AttributeItem from '@_c/decorate/attribute-item.vue'
import LinkSelect from '@_c/link-select/index.vue'
import MaterialSelect from '@_c/material-select/index.vue'
import NavList from './nav-list.vue'
import ComAttribute from '@/components/decorate/ComAttribute.vue'
@Component({
    components: {
        AttributeTabs,
        ColorSelect,
        StyleChose,
        Slider,
        AttributeItem,
        MaterialSelect,
        NavList,
        LinkSelect,
        ComAttribute
    }
})
export default class AttributeNavigationCard extends Vue {
    /** S data **/
    $refs!: { materialSelect: any }
    index = -1
    styleData = [
        {
            name: '图文',
            value: 1
        },
        {
            name: '文字',
            value: 2
        },
        {
            name: '图文卡片',
            value: 3
        }
    ]
    indicatorData = [
        {
            name: '圆角',
            value: 1
        },
        {
            name: '圆形',
            value: 2
        }
    ]
    resetColor = ''
    /** E data **/

    /** S computed **/

    get content() {
        return this.$store.getters.content
    }

    set content(val) {
        const data = {
            key: 'content',
            value: val
        }
        this.$store.commit('setAttribute', data)
    }
    get styles() {
        return this.$store.getters.styles
    }

    /** E computed **/

    /** S methods **/
    addContentData(v:[]) {
        const data = {
            key: 'content',
            value: {
                ...this.content,
                data: v
            }
        }
        
        this.$store.commit('setAttribute', data)
    }
    /** E methods **/
}
</script>

<style lang="scss" scoped></style>
